<template>
    <div class="userEdit_box">

        <div class="form_box">
            <h2>个人信息设置</h2>
            <el-form  label-width="80px" :model="userDetail">
                <div class="row">
                    <div class="col-md-6">
                        <el-form-item label="用户名">
                            <el-input v-model="userDetail.username"></el-input>
                        </el-form-item>
                        <el-form-item label="绑定邮箱">
                            <el-input v-model="userDetail.email"></el-input>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-date-picker
                                v-model="userDetail.birthday"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="date"
                                placeholder="选择日期"
                                style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="col-md-6" style="overflow: hidden;">
                        <el-form-item label="头像">
                             <!-- <el-avatar :size="150">
                                <img :src="backUrl + userDetail.profilePhoto" alt="">
                            </el-avatar> -->
                            <UserUpload/>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="性别">
                    <el-radio v-model="userDetail.sex" :label="true">男生</el-radio>
                    <el-radio v-model="userDetail.sex" :label="false">女生</el-radio>
                </el-form-item>

                <el-form-item label="爱好">
                    <el-input v-model="userDetail.hobby"></el-input>
                </el-form-item>

                <!-- <el-form-item label="爱好">
                    <el-checkbox-group v-model="userDetail.hobby">
                        <el-checkbox label="音乐" name="type"></el-checkbox>
                        <el-checkbox label="美术" name="type"></el-checkbox>
                        <el-checkbox label="科技" name="type"></el-checkbox>
                        <el-checkbox label="运动" name="type"></el-checkbox>
                        <el-checkbox label="其他" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item> -->
                <!-- <el-form-item label="开关">
                    <el-switch ></el-switch>
                </el-form-item> -->
                <el-form-item label="座右铭">
                    <el-input
                    v-model="userDetail.motto"
                    type="textarea"
                    :autosize="{minRows:2}"
                    maxlength="80"
                    show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="个人介绍">
                    <el-input
                    v-model="userDetail.introduce"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 10}"
                    maxlength="300"
                    show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUserDetail">更新</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import UserUpload from './UserUpload'
import { mapState } from 'vuex'
export default {
  inject: ['reload'],
  components: {
    UserUpload
  },
  data () {
    return {
      username: '',
      userDetailForm: {
        birthday: '',
        sex: '',
        motto: '',
        hobby: '',
        introduce: ''

      }
    }
  },
  computed: {
    ...mapState(
      {
        userDetail: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }

    )
    // userDetail () {
    //   var userDetail = this.userInfo
    //   return userDetail
    // }
  },
  methods: {
    // 编辑更新个人信息
    async updateUserDetail () {
      // 如果用户名发生改变，修改用户名
      if (this.username !== this.userDetail.username) {
        console.log('更新用户名')
        const { data: usernameRes } = await this.$http.get(`/user/updateName/${this.userDetail.username}`)
        console.log(usernameRes)
        if (usernameRes.code !== 200) {
          return
        }
      }

      //  修改常规资料
      const { data: res } = await this.$http.post('/user/updateInfo', {
        introduce: this.userDetail.introduce,
        sex: this.userDetail.sex,
        motto: this.userDetail.motto,
        hobby: this.userDetail.hobby,
        birthday: this.userDetail.birthday
      })
      // console.log(res)
      if (res.code !== 200) return this.$message.error('更新个人信息失败！')
      this.$message.success('更新个人信息成功！')

      // 重新获取到个人信息，存储到vuex
      this.$store.dispatch('getUserInfo')

      // 上传成功刷新页面
      window.location.reload()
      // this.reload()
    }

  },
  created () {
    this.username = this.userDetail.username
  }
}
</script>

<style lang="less" scoped>
.userEdit_box{
    .form_box{
        background:  rgb(236, 243, 248);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 10%;
        h2{
            text-align: center;
            color: rgb(228, 236, 154);
            margin-bottom: 5%;
        }
        // border: 1px solid rebeccapurple;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 2% 10%;
        // width: 60%;
        .el-form{

        }
    }
}
.el-avatar{
    border: 1px solid rgb(243, 219, 190);
    background-color: rgb(252, 251, 249);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 8px;
    position: relative;
    img{
        border-radius: 50%;
        width: 90%;
        height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}
</style>
